<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="800px">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="insertUser()">插入</button>
						<button @click="deleteUserById(user.id)">删除</button>
					</td>
					
				</tr>
				<!-- <tr align="center" v-for="user in userList">
					<td>{{user.id}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>{{user.sex}}</td>
				</tr> -->
				
			</table>
		</div>

		<script>
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					//定义属性 接受ajax结果
					userList: []
				},
				methods: {
					async findUser(){
						let {data:result} =await axios.get("user/findAll")
						console.log(result)
						//ajax返回的结果赋值给vue.js属性
						this.userList = result
					},
					deleteUserById(id){
						if(confirm("确定删除["+id+"]员工吗？")){
							axios.get("user/deleteUserById?id="+id)
							.then(this.findUser())
							alert("删除成功")
						}else{
							return false;
						}
					},
					insertUser(){
						let user={id:200,name:"派大星",age:"15"}
						if(confirm("确定插入派大星吗？")){
							axios.post("user/insertUser",user)
							.then(this.findUser())
							alert("插入成功")
							}else{
								return false;
						}
					}
				},
				mounted(){//生命周期函数  由系统调用
					this.findUser()
				}
			})
		</script>
	</body>
</html>
